<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/userSeting.css">
    <style>
        .myIcon {
            border-radius: 50%;
        }

        #saveBtn {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="../index.html">首页</a></li>
                <li><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">在线练习</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/index/search.png" alt="">
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li id="ImUsername">我是用户名</li>
                        <li><a href="./course.html">课程中心</a></li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>课程中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"><a href="./course.html">我的课程</a></li>
                        <li class="select">我的练习</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="order">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的订单</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="money">
                        <span>资金管理</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的钱包</li>
                        <li class="select">优惠券</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="center">
                        <span>个人中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select active">账户设置</li>
                        <li class="select">我的消息</li>
                        <li class="select">我的评价</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>个人中心</span>
            </div>
            <div class="title_center">
                <span>学员档案</span>
            </div>
            <div class="content_show">
                <div class="my_icon">
                    <span>头像</span>
                    <a href="javascript:;">
                        <img src="" class="myIcon" id="result" />
                        <div class="change">
                            更换头像
                            <input type="file" class="btn_file" />
                        </div>
                    </a>
                </div>
                <div class="my_name">
                    <div class="my_name_left">
                        <span>真实姓名</span>
                        <input type="text" id="realname" placeholder="方便老师联系你，只能修改一次哦～">
                    </div>
                    <div class="my_name_right">
                        <span>昵称</span>
                        <input type="text" id="username">
                    </div>
                </div>
                <div class="my_sex">
                    <div class="my_name_left" id="sex">

                    </div>
                    <div class="my_name_right">
                        <span>生日</span>
                        <input type="datetime-local" id="birthdate">
                    </div>
                </div>
                <div class="my_phone">
                    <div class="my_name_left">
                        <span>城市</span>
                        <select name="city" id="city">
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                        </select>
                    </div>
                </div>
                <div class="my_learn">

                    <div class="my_name_right" id="saveBtn">
                        保存
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </main>
    <!-- 底部栏 -->
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <!-- 固定导航 -->
    <div class="fix">
        <div class="lesson">
            <img src="../img/index/mylesson.png" alt="">
        </div>
        <div class="test">
            <img src="../img/index/mytest.png" alt="">
        </div>
        <div class="top">
            <img src="../img/index/gotop.png" alt="">
        </div>
    </div>
    <script src="../js/userSeting.js"></script>
    <script src="../utils/jquery.min.js"></script>
    <script src="../utils/moment.js"></script>
</body>
<script src="../utils/Http.js" type="module"></script>
<script src="../js/myRender.js" type="module"></script>
<script type="module">
    import Http from '../utils/Http.js'
    import {userinfo,showLoginAndRegister} from '../js/myRender.js'
    showLoginAndRegister()
    //获取用户信息数据 并渲染
    async function getUserSet() {
        let {
            result
        } = await Http({
            url: '/api/user',
            data: {
                mid: userinfo.mid,
                // mid: '92f9793a-7c42-45c3-895b-4f6f1845def4',
            }
        })

        if (result == '请登录') {
            alert('请登录')
            location.href = './loginAndRegister/login.html'
            return;
        }

        let {
            realname,
            username,
            sex,
            birthdate,
            city,
            head_photo_url
        } = result.result

        $('.myIcon').attr('src', head_photo_url || '../img/login/user.png') //头像信息内容
        $('#realname').val(realname) //获取真实姓名
        $('#username').val(username) //获取昵称
        $('#sex').html(
            `<span>学员性别</span><label><input type="radio" name="sex" ${sex==2 ? 'checked' : '' }
                    sex="2"><span>男</span></label><label><input type="radio" name="sex" ${sex==1 ? 'checked' : '' }
                    sex="1"><span>女</span></label>`
        ) //设置性别

        // $('#birthdate').val(moment(birthdate - 0).format('YYYY-MM-DD')) //date的算法
        $('#birthdate').val(moment(birthdate - 0).format('YYYY-MM-DDTHH:mm')) //日期datetime-local的算法

        $('#city option:contains(' + city + ')').attr("selected", true); //contains 选择内容包含什么的元素
        // $('#city option[value=' + city + ']').attr("selected", true); //选择option的属性value为city的

    }
    getUserSet()
    //上传头像！！！
    $('.btn_file').change(function () {
        var formData = new FormData();
        var files = $(".btn_file").get(0).files[0]
        formData.append("f", files);
        formData.append("mid", userinfo.mid);

        $.ajax({
            url: 'http://localhost:3000/api/uploadhead',
            type: 'post',
            data: formData,
            headers: {
                authorization: userinfo.token, //传入token
            },
            contentType: false, //不设置Content-Type请求头
            processData: false, // 不处理发送的数据
            success(result) {
                $('.myIcon').attr('src', result.result) //头像信息内容
            },
            error(result) {
                alert('请登录')
                location.href = './loginAndRegister/login.html'
            }
        })
    })

    //点击保存 修改内容
    $('#saveBtn').click(async function () {

        let realname = $('#realname').val() //获取真实姓名

        let sex = 3; //默认为保密 即为无
        // $('#sex label input[name="sex"]').each(function () {
        //     if ($(this).prop('checked')) {
        //         sex = $(this).attr('sex') - 0;
        //         return;
        //     }
        // }) //设置性别
        sex = $('input[name="sex"]').eq(0).prop('checked') ? 2 : 1; //设置性别
        console.log(sex);
        let birthdate = $('#birthdate').val() //获取时间
        birthdate = moment(birthdate).valueOf() //时间转为转换为时间戳毫秒

        let city = $('#city').val()

        let {
            result
        } = await Http({
            url: '/api/user',
            type: 'put',
            data: {
                realname,
                sex,
                birthdate,
                city,
                mid: userinfo.mid
            }
        })
        if (result == '请登录') {
            alert('请登录')
            location.href = './loginAndRegister/login.html'
            return;
        }
        if (result.status == 200) {
            alert('更改成功！');
        } else {
            alert('输入不能为空')
        }
    })

    //
</script>

</html>